<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_列表渲染</title>
</head>
<body>
<!--
1列表展示
    数组：v-for /index
    对象：v-for /key
2列表的更新展示
    删除item
    替换item

-->
<div id="app">
    <h2>测试： v-for  遍历数组</h2>
        <ul>
            <li v-for="(p,index) in item" :key="index">
                {{index}}--{{p.message}}---{{p.a}}

                ----<button @click="deleteP(index)">删除</button>
                ----<button @click="updateP(index,{message: 'aaa',a:'xxx'})">更新</button>

            </li>
        </ul>
    <h2>测试： v-for  遍历对象</h2>
    <ul>
        <li v-for="(v,p) in object" :key="v">
            {{v}}
            {{p}}
        </li>
        ----
        <li v-for="v in object" :key="v">
            {{v}}
        </li>
    </ul>
</div>


</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    /*
    Vue本身只是监视了persions的一系列改变，没有监视数据内部数据的改变
    Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生的方法，再更新界面)
    *
    * */
    const vm = new Vue({
        el:'#app',
        data:{
            item:[
                {message: 'foo',a:'1'},
                {message: 'bar',a:'2'}
            ],
            object:{
                tittle: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt : '2016-02-10'
            }
        },
        methods :{
            deleteP(index){
                this.item.splice(index,1)
            },
            updateP(index ,newP){
                //this.item[index] = newP //并没有改变item本身，数组内部发生了变化，没有调用变异方法(再vue列表渲染下面有说到)vue不会更新
                this.item.splice(index,1,newP)
                //this.item.push(newP)
            }
        }

    })


</script>


</html>